<template>
  <a-card :bordered="false" style="margin-bottom: 10px">
    <a-row type="flex" align="top">
      <!-- <a-col :span="2">
        <img v-if="infoObj.avatar" :src="infoObj.avatarSrc" style="width: 80px;" />
        <img v-else src="~@/assets/head.png" style="width: 80px;" />
      </a-col> -->
      <a-col :span="20">
        <p><span class="s1">{{ infoObj.name }}</span><span> / 职务/身份：</span><span class="s2">{{ setTittle(infoObj.post)
        }}</span><span class="s3">
            联系方式：</span><span class="s2">{{ infoObj.telphone }}</span></p>
        <p><span>性别：</span><span>{{ infoObj.gender == 1 ? '男' : '女' }}</span><span class="s3">
            年龄：</span><span>{{ infoObj.age }}</span><span class="s3">
            参与小组数：</span><span>{{ infoObj.count }}</span><span class="s3">
            添加时间：</span><span>{{ infoObj.createTime }}</span></p>
      </a-col>
    </a-row>
    <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="false" :loading="loading" :columns="columns"
      :dataSource="pageData" @change="onTableChange" style="margin-top:20px;">
      <template slot="memberType" slot-scope="text">
        <span v-if="text == '1'">组长</span>
        <span v-if="text == '2'">成员</span>
      </template>
      <template slot="type" slot-scope="text">
        <span>{{ setTittle1(text) }}</span>
      </template>
      <!--操作-->
      <template slot="action" slot-scope="text, record">
        <a-button @click="onDetail(record)" type="link" style="padding: 0">查看</a-button>
      </template>
    </z-table>
  </a-card>
</template>

<script>
import * as groupApi from '@/api/sjsk/groupManage.js'
export default {
  data() {
    return {
      loading: false,
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '成员类型',
          dataIndex: 'memberType',
          align: 'center',
          scopedSlots: { customRender: 'memberType' },
        },
        {
          title: '参与负责吸毒人员',
          dataIndex: 'name',
          align: 'center',
        },
        {
          title: '身份证号',
          dataIndex: 'identification',
          align: 'center',
        },
        {
          title: '人员类型',
          dataIndex: 'type',
          align: 'center',
          scopedSlots: { customRender: 'type' },
        },
        {
          title: '添加时间',
          dataIndex: 'createTime',
          align: 'center',
        },
        {
          title: '操作',
          width: 80,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
        id: this.$route.query.id,
        type: this.$route.query.type
      },
      pageData: {},
      infoObj: {}
    }
  },
  async mounted() {
    this.onQuery()
  },

  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      this.loading = true
      groupApi.viewGroupInfos(this.pageFilter).then((res) => {
        if (res.success) {
          this.pageData = res.result.list
          this.infoObj = res.result.sjskTeamerDTO
          this.loading = false
        } else {
          this.loading = false
        }
      })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    setTittle(text) {
      return this.$filterDictTextByCache('groupPost', text)  //现在字典中对应的文字，是全局函数
    },
    setTittle1(text) {
      return this.$filterDictTextByCache('personType', text)  //现在字典中对应的文字，是全局函数
    },
    onDetail(record) {
      //跳转到全息档案
      // this.$router.push({
      //   path: "/assistAndEducation/record",
      //   query: {
      //     id: record.id
      //   }
      // })
    },
  },
}
</script>
<style lang="less" scoped>
.s1 {
  font-size: 20px;
  font-weight: bold;
}

.s2 {
  // color: #04B615;
}

.s3 {
  margin-left: 30px;
}
</style>
